import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { Status, Is, MenuType, StatusTag, IsOptions, StatusOptions } from '@/enums/fieldsEnum';

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'menu_name',
    width: 200,
    align: 'left',
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 40,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: '权限标识',
    dataIndex: 'permission',
    width: 180,
  },
  // {
  //   title: '路由名称',
  //   dataIndex: 'route_name',
  //   width: 80,
  // },
  {
    title: '组件',
    dataIndex: 'component',
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 50,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => StatusTag(record.status),
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 180,
  },
];

const isMenu = (menu_type: number) => menu_type === MenuType.Menu;
const isButton = (menu_type: number) => menu_type === MenuType.Action;

export const searchFormSchema: FormSchema[] = [
  {
    field: 'menu_name',
    label: '菜单名称',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: StatusOptions,
    },
    colProps: { span: 8 },
  },
];

export const formIdSchema: FormSchema = {
  field: 'menu_id',
  label: '角色ID',
  required: true,
  component: 'InputNumber',
  show: false,
  componentProps: {
    disabled: true,
  },
};

export const formSchema: FormSchema[] = [
  {
    field: 'menu_id',
    label: '菜单ID',
    component: 'InputNumber',
    show: false,
  },
  {
    field: 'menu_type',
    label: '菜单类型',
    component: 'RadioButtonGroup',
    defaultValue: MenuType.Menu,
    componentProps: {
      options: [
        { label: '菜单', value: MenuType.Menu },
        { label: '操作', value: MenuType.Action },
      ],
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'menu_name',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },

  {
    field: 'parent_id',
    label: '上级菜单',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        label: 'menu_name',
        key: 'menu_id',
        value: 'menu_id',
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
    ifShow: ({ values }) => isMenu(values.menu_type),
  },

  {
    field: 'route_name',
    label: '路由名称',
    component: 'Input',
    helpMessage: '需要此路由缓存时填写，名称和组件代码定义的一致，且打开缓存开关',
    ifShow: ({ values }) => isMenu(values.menu_type),
  },
  {
    field: 'path',
    label: '路由地址',
    component: 'Input',
    required: true,
    helpMessage: '浏览器访问的路由地址',
    ifShow: ({ values }) => isMenu(values.menu_type),
  },
  {
    field: 'component',
    label: '组件路径',
    helpMessage: 'vue组件的路径，不需要views开头，不需要.vue结尾',
    component: 'Input',
    ifShow: ({ values }) => isMenu(values.menu_type),
  },
  {
    field: 'permission',
    label: '权限标识',
    component: 'Input',
    required: true,
    ifShow: ({ values }) => isButton(values.menu_type),
  },

  {
    field: 'sort',
    label: '排序',
    helpMessage: '从小到大排序',
    component: 'InputNumber',
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: Status.Enabled,
    componentProps: {
      options: StatusOptions,
    },
  },
  {
    field: 'is_frame',
    label: '是否外链',
    component: 'RadioButtonGroup',
    defaultValue: Is.No,
    componentProps: {
      options: IsOptions,
    },
    ifShow: ({ values }) => isMenu(values.menu_type),
  },

  {
    field: 'no_cache',
    label: '不缓存',
    component: 'RadioButtonGroup',
    defaultValue: Is.Yes,
    componentProps: {
      options: IsOptions,
    },
    ifShow: ({ values }) => isMenu(values.menu_type),
  },

  // {
  //   field: 'api_ids',
  //   label: '绑定接口',
  //   component: 'ApiSelect',
  //   componentProps: {
  //     api: getApiOptions,
  //     showSearch: true,
  //     resultField: 'options',
  //     labelField: 'text',
  //     valueField: 'value',
  //     optionFilterProp: 'label',
  //     mode: 'multiple',
  //   },
  //   ifShow: ({ values }) => isButton(values.menu_type),
  // },
  {
    field: 'visible',
    label: '是否显示',
    component: 'RadioButtonGroup',
    defaultValue: Is.Yes,
    componentProps: {
      options: IsOptions,
    },
    ifShow: ({ values }) => isMenu(values.menu_type),
  },
];
